<template>
    <ul>
        <li v-for="(item, index) in siderNavs" :key="item + index">
            <!-- 绑定 ref 属性 -->
            <p :ref="`txtRef-${index}`" :style="styleFormate(index, item.name)">
                {{ item.name }}
            </p>
        </li>
    </ul>
</template>

<script>
export default {
    data() {
        return {
            siderNavs: [
                { name: "Nav 1sdfghj" },
                { name: "Nav 2" },
                { name: "Nav 3" },
            ],
        };
    },
    methods: {
        styleFormate(index, text) {
            // 通过 $nextTick() 确保获取 DOM 信息的准确性
            return this.$nextTick(() => {
                const refObj = `txtRef-${index}`;
                // 获取当前文本 DOM
                const dom = this.$refs[refObj];
                // 计算文本 DOM 的宽度
                const width = dom[0].clientWidth;
                // 获取父容器 DOM 的宽度
                const parentWidth = dom[0].parentNode.clientWidth;
                // 计算缩放比例
                const multNum = parentWidth / width;
                // 如果缩放比例小于 1，则进行缩放
                if (multNum < 1) {
                    // 保留两位小数，避免出现极小的数字
                    const num = Math.floor(multNum * 100) / 100;
                    // 根据缩放比例计算缩放后的字体大小
                    const fontSize = Math.floor(num * 10) + "%";
                    // 设置样式
                    const style = `transform:scale(${num}); font-size:${fontSize};`;
                    dom[0].style = style;
                } else {
                    // 如果缩放比例大于等于 1，则恢复原始样式
                    const style = `transform:scale(1); font-size:98%;`;
                    dom[0].style = style;
                }
            });
        },
    },
};
</script>

<style>
li {
    width: 64px;
    height: 64px;
    border: 1px solid;
}

p {
    font-size: 10%;
    border: 1px solid;
    white-space: nowrap;
}
</style>
